import { lazy, Suspense } from "react";
import { Navigate } from "react-router-dom";

import Home from "../pages/Home/Home"; //  首页组件  登录/注册/404组件
import NotFound from "../pages/NotFound/NotFound";
import Redux from '../pages/Redux/Redux.jsx'

//路由懒加载
let Ref = lazy(() => import("../pages/Ref/Ref"));
let Hooks = lazy(() => import("../pages/Hooks/Hooks"));
let Todolist = lazy(() => import("../pages/Todolist/Todolist"));
let Heros = lazy(() => import("../pages/Heros/Heros"));
let Duanzi = lazy(() => import("../pages/Duanzi/Duanzi"));
let News = lazy(() => import("../pages/News/News"));
let Junshi = lazy(() => import("../components/Junshi/Junshi"));
let Guonei = lazy(() => import("../components/Guonei/Guonei"));
let HerosCon = lazy(() => import("../pages/HerosCon/HerosCon"));

function load(Comp) {
	return (
		<Suspense fallback={<div>正在加载中...</div>}>
			<Comp />
		</Suspense>
	);
}

export default [
	{
		path: "/home",
		element: <Home />,
	},
	{
		path: "redux",
		element: <Redux />,
	},
	{
		path: "/ref",
		element: load(Ref),
	},
	{
		path: "/hooks",
		element: load(Hooks),
	},
	{
		path: "/todolist",
		element: load(Todolist),
	},
	{
		path: "/heros",
		element: load(Heros),
	},
	{
		path: "/duanzi",
		element: load(Duanzi),
	},
	{
		path: "/news", // 路由地址
		element: load(News), //路由组件
		children: [
			// 子路由
			{
				path: "/news/guonei",
				element: load(Guonei),
			},
			{
				path: "junshi",
				element: load(Junshi),
			},
			{
				index: true,
				element: <Navigate to="/news/guonei" />,
			},
		],
	},
	{
		index: true,
		element: <Navigate to="/redux" />,
	},
	//静态路由
	{
		path: "/heroscon",
		element: load(HerosCon),
	},
	// 动态路由
	/* {
        path:"/heroscon/:id/:name",
        element:<HerosCon />
    }, */
	{
		path: "*",
		element: <NotFound />,
	},
];
